<template>
	<view class="gelp-page">
		<view class="top">
			
			<view class="item" v-for="(item,index) in typeList"  @tap="select(index)" :class="item.addClass">
				<view class="box">
					<!-- <span class="iconfont iconshezhi" :class="item.icon"></span> -->
					<span class="name">{{item.treeName}}</span>
				</view>
				
			</view>
			<!-- 手风琴效果 -->
<!-- 			<uni-collapse accordion="true" class="collapse">
			    <uni-collapse-item class="item1" v-for="(item,index) in typeList"  @tap="select(index)" :class="item.addClass"  :title="item.treeName" >
			        <view style="padding: 30rpx;">
			            手风琴效果
			        </view>
			    </uni-collapse-item>			   
			</uni-collapse> -->
			
		</view>
		<view class="bottom">
			<span class="name">帮助列表</span>
			<view class="main">
				<view class="item" v-for="(item,index) in list1" @tap="goPage('helpContent?id='+item.id)">
					<span class="text">{{item.title}}</span>
					<!-- <span class="iconfont icondown" :class="item.icon"></span> -->
				</view>
			</view>
		</view>
		<view class="search-box iconfont iconsousuo1" @tap="goSearch">搜索问题</view>
	</view>
</template>

<script>
	
	export default {
		components: {},
		data() {
			return {
				typeList:[
				],
				type:'',
				pageNo:1,
				pageSize:20,
				input:'',
				list1:[
				

				]
			}
		},
		onLoad() {
			this.getType();		
			// this.getData();	
		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			getType(){
	            let that = this;
	            this.$http.post("/f/listHelperClassify")
	            .then(function (response) {
	                let list = response.data;
	                if(list){
	                    list.forEach((item,i)=>{
	                        item.addClass=""
	                    })
	                }
	                that.typeList = list;
					that.select(0);
	                  
	            })
	            .catch(function (error) {
	                  // handle error
	                  console.log(error);
	            })
	        },
	        getData(){
	            let that = this;
	            this.$http.get("/f/pageHelper?classifyId="+this.type+"&pageNo="+this.pageNo+"&pageSize=10&title="+this.input)
	            .then(function (response) {
	                that.list1 = response.data;
	            })
	            .catch(function (error) {
	                  // handle error
	                  console.log(error);
	            })
	        },
			goSearch(){
				uni.navigateTo({
					url:'helpSearch'
				})
			},
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			search(){

			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.typeList.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.type = item.id;
						this.getData();
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.gelp-page{
		width:100%;
		height:100%;
		overflow-y:auto;
		background:#f4f4f4;
		position:relative;
		.search-box{
			width:100%;
			height:100rpx;
			position:absolute;
			left:0;
			bottom:0;
			line-height:100rpx;
			text-align:center;
			background:#1783dd;
			color:#ffffff;
			font-size:32rpx;
		}
		.search-box:before{
			margin-right:10rpx;
		}
		.bottom{
			width:100%;
			margin-top:40rpx;
			.name{
				display:block;
				width:100%;
				box-sizing:border-box;
				padding:0 20rpx;
				line-height:50rpx;
				font-size:34rpx;
				color:#555555;
			}
			.main{
				width:100%;
				box-sizing:border-box;
				padding:0 30rpx;
				background:#fff;
				margin-top:20rpx;
				
				.item{
					width:100%;
					display:flex;
					justify-content:space-between;
					align-items:center;
					height:90rpx;
					border-bottom:1px solid #e8e8e8;
					flex-wrap:wrap;
				}
				.text{
					display:block;
					width:calc(100% - 60rpx);
					font-size:30rpx;
					color:#444444;
					height:60rpx;
					line-height:60rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				}
				.iconfont{
					font-size:32rpx;
					color:#adadad;
				}
				.item:last-child{
					border:0;
				}
			}
		}
		.top{
			width:100%;
			padding:0 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			// padding-top:50rpx;
			box-sizing:border-box;
			margin-top:40rpx;
			margin-bottom: 40rpx;
			background:#ffffff;
			display:flex;
			flex-wrap:wrap;
			justify-content: space-evenly;
			.active{
				background: #1783dd;
				.name{
					color: white !important;
				}
			}
			.item{
				// margin-right: 60rpx;
				// margin-bottom:50rpx;
				display:flex;
				align-items:center;
				justify-content:center;
				border: 1px solid #1783dd;				
				width:33.3%;
				box-sizing:border-box;
				height:80rpx;
				margin-right: 30rpx;
				.box{
					// display:flex;
					// align-items:center;
				}
				.iconfont{
					width:50rpx;
					height:50rpx;
					display:block;
					border-radius:50%;
					line-height:50rpx;
					text-align:center;
					color:#fff;
					background:#1783dd;
					font-size:32rpx;
					margin-right:10rpx;
				}
				.name{
					font-size:16px;
					color:#1783dd;
				}
			}
			.collapse{
				display: flex;
				width: 100%;
				flex-direction: row;
				
				.item:nth-child(3n){
					border-right:0;
				}
				// .active{
				// 	.name{
				// 		color:#1783dd;
				// 	}
				// }
			}


		}
	}
</style>
